<template>
  	<div class="map-wrapper" id="g-map">	  
	</div>
</template>
<script>
import BaseWidget from '@/jimu/BaseWidget.js'

export default {
	name: 'MapWidget',
	mixins: [ BaseWidget ],
	components: {
	},
	data () {
		return {
			baseMap: null,
		}
	},
	created: function() {
		this.subscribe()
	},
	mounted() {
		this.initMap();
	},
	methods: {
		/* 订阅事件 */
		subscribe(){

		},
		/* 地图初始化 */
		initMap() {
			this.map = new G.Map("g-map", this.config.mapConfig);
			this.baseMapLayer = new G.Layer.Tile(this.config.baseMap.url, {
				cluster: this.config.baseMap.cluster
			});
			this.baseMapLayer.addTo(this.map)
			this.share('map',this.map)
			this.share('baseMap', this.baseMapLayer)
			this.bindMapEvent()
		},

		/* 绑定地图事件 */
		bindMapEvent: function(){
			this.map.bind('viewChanged', event => {
				let viewData = {
					extent: this.map.getExtent(),
					center: event.to.center,
					res: event.to.res
				}
				this.share('viewData', viewData)
			})
		}
	}
}
</script>

<style lang='scss'>
#g-map{
    height:100%;
	width:100%;
}


</style>
